#main-list {
  .panel-content {
    padding: 0 10px;
  }

  .panel-content-title {
    padding: 0 10px;

    md-input-container {
      &.search-pattern {
        height: 40px;
        margin-bottom: 0;
      }
    }

    .search-project {
      margin-left: 10%;
    }

    .md-icon-button {
      width: 26px;
      padding: 0;
      vertical-align: -15px;

      md-icon {
        padding-top: 5px;
      }
    }
  }

  md-input-container.md-has-icon {
    padding: 0;
  }

  #cubism-wrap {
    width: 100%;
    border-top: 1px solid #ccc;
    position: relative;
    overflow-x: scroll;
  }

  .horizon {
    .title {
      a {
        color: #333;

        &.anomalous {
          color: #c03;
        }
      }
    }
  }
  /**
   * Chart
   */
  .chart-box,
  .chart-box-top {
    width: 100%;
    overflow-x: scroll;
    border: 0;
  }

  .chart-box-top {
    overflow-y: hidden;
    padding: 0;
    margin: 0;
  }

  .chart-box-top-div {
    width: 1280px;
    height: 20px;
  }

  .chart {
    position: relative;
    width: 1280px;
    margin: 0 auto;
    padding: 15px 0;
  }

  .chart .title {
    background-color: rgba(255, 255, 255, .85);
    margin-left: 0;
    padding: 0 7px;
  }

  .chart .title a {
    color: #333;
  }

  .chart .title a.anomalous {
    color: #c03;
  }

  .chart .value {
    color: black;
  }

  /* Force chart-box scrollbars to display on mac */
  .chart-box-force-scrollbar::-webkit-scrollbar {
    height: 8px;
  }

  .chart-box-force-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #bbb;
    -webkit-border-radius: 6px;
    border-radius: 6px;
  }

  .chart-box-force-scrollbar::-webkit-scrollbar-thumb {
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background: #aaa;
  }

  .chart-box-force-scrollbar::-webkit-scrollbar-thumb:window-inactive {
    background: #eee;
  }
  /**
 * Cubism custom styles.
 */
  .axis {
    font: 12px sans-serif;
  }

  .axis text {
    -webkit-transition: fill-opacity 250ms linear;
  }

  .axis path {
    display: none;
  }

  .axis line {
    stroke: #333;
    shape-rendering: crispEdges;
  }

  .horizon {
    position: relative;
  }

  .horizon {
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
  }

  .horizon + .horizon {
    border-top: none;
  }

  .horizon canvas {
    display: block;
  }

  .horizon .title,
  .horizon .value {
    bottom: 0;
    line-height: 30px;
    margin: 0 6px;
    position: absolute;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    white-space: nowrap;
  }

  .horizon .title {
    background-color: rgba(255,255,255,.85);
    margin-left: 0;
    padding: 0 7px;
  }

  .horizon .title {
    left: 0;
  }

  .horizon .value {
    right: 0;
  }

  .line {
    background: black;
    z-index: 1000;
  }

  .graphite-link {
    margin-left: 10px;
    position: relative;
    display: inline-block;
    float: right;
    text-decoration: underline;
  }

  .box {
    margin-left: 10px;
    position: relative;
    display: inline-block;
    float: right;

    >span {
      color: #333;
      border-bottom: 1px solid #000;
    }
    .icon-tr:after {
      margin-left: 2px;
      content: '\25BC';
      display: inline-block;
      speak: none;
      -webkit-transform: scaleY(.6) scaleX(1);
      transform: scaleY(.6) scaleX(1);
    }
    >ul {
      padding: 5px 10px;
      display: none;
      position: absolute;
      top: 15px;
      left: 0;
      z-index: 9999;
      background-color: #fff;
      box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);

      li {
        a {
          color: #333;
        }
      }
    }

    &:hover {
      >ul {
        display: block;
      }
    }
  }
}
